<template>
  <el-dialog
    v-model="dialogVisible"
    title="公告详情"
    width="800px"
    :close-on-click-modal="false"
  >
    <div v-if="announcement" class="announcement-detail">
      <!-- 基本信息 -->
      <el-card class="info-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="公告ID">
            {{ announcement.id }}
          </el-descriptions-item>
          <el-descriptions-item label="公告标题">
            {{ announcement.title }}
          </el-descriptions-item>
          <el-descriptions-item label="公告类型">
            <el-tag :type="utils.getTypeTagType(announcement.type)">
              {{ utils.getTypeText(announcement.type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="公告级别">
            <el-tag :type="utils.getLevelTagType(announcement.level)">
              {{ utils.getLevelText(announcement.level) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="公告状态">
            <el-tag :type="utils.getStatusTagType(announcement.status)">
              {{ utils.getStatusText(announcement.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="目标受众">
            {{ utils.getTargetAudienceText(announcement.targetAudience) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 特殊标记 -->
      <el-card class="info-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>特殊标记</span>
          </div>
        </template>
        <div class="special-marks">
          <el-tag v-if="announcement.isTop" type="warning" size="large">
            <el-icon><Top /></el-icon>
            置顶公告
          </el-tag>
          <el-tag v-if="announcement.isPopup" type="danger" size="large">
            <el-icon><Bell /></el-icon>
            弹窗公告
          </el-tag>
          <el-tag
            v-if="!announcement.isTop && !announcement.isPopup"
            type="info"
            size="large"
          >
            普通公告
          </el-tag>
        </div>
      </el-card>

      <!-- 时间信息 -->
      <el-card class="info-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>时间信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="创建时间">
            {{ announcement.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ announcement.updateTime }}
          </el-descriptions-item>
          <el-descriptions-item label="发布时间">
            {{ announcement.publishTime }}
          </el-descriptions-item>
          <el-descriptions-item label="过期时间">
            {{ announcement.expireTime }}
          </el-descriptions-item>
          <el-descriptions-item label="剩余天数">
            <span
              :class="{
                'text-danger':
                  announcement.remainingDays <= 3 &&
                  announcement.remainingDays > 0,
                'text-warning':
                  announcement.remainingDays <= 7 &&
                  announcement.remainingDays > 3
              }"
            >
              {{ utils.formatRemainingDays(announcement.remainingDays) }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="是否过期">
            <el-tag :type="announcement.expired ? 'danger' : 'success'">
              {{ announcement.expired ? "已过期" : "未过期" }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 统计信息 -->
      <el-card class="info-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>统计信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="浏览次数">
            {{ utils.formatViewCount(announcement.viewCount) }}
          </el-descriptions-item>
          <el-descriptions-item label="创建者">
            {{ announcement.creatorName }}
          </el-descriptions-item>
          <el-descriptions-item label="阅读状态">
            <el-tag :type="announcement.read ? 'success' : 'warning'">
              {{ announcement.read ? "已读" : "未读" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态名称">
            {{ announcement.statusName }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 公告内容 -->
      <el-card class="info-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>公告内容</span>
            <el-button type="primary" size="small" @click="copyContent">
              <el-icon><DocumentCopy /></el-icon>
              复制内容
            </el-button>
          </div>
        </template>
        <div class="content-container">
          <div class="content-text">
            {{ announcement.content }}
          </div>
        </div>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { ElMessage } from "element-plus";
import { Top, Bell, DocumentCopy } from "@element-plus/icons-vue";
import {
  AnnouncementManagementUtils,
  type AnnouncementInfo
} from "@/api/announcement-management";

// 将工具类暴露给模板
const utils = AnnouncementManagementUtils;

// Props
interface Props {
  visible: boolean;
  announcement?: AnnouncementInfo | null;
}

const props = withDefaults(defineProps<Props>(), {
  announcement: null
});

// Emits
const emit = defineEmits<{
  "update:visible": [value: boolean];
}>();

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: value => emit("update:visible", value)
});

// 复制内容到剪贴板
const copyContent = async () => {
  if (!props.announcement?.content) {
    ElMessage.warning("没有内容可复制");
    return;
  }

  try {
    await navigator.clipboard.writeText(props.announcement.content);
    ElMessage.success("内容已复制到剪贴板");
  } catch (error) {
    console.error("复制失败:", error);
    ElMessage.error("复制失败，请手动复制");
  }
};
</script>

<style scoped>
.announcement-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.info-card {
  margin-bottom: 20px;
}

.info-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
}

.special-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.content-container {
  max-height: 300px;
  overflow-y: auto;
}

.content-text {
  padding: 10px;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.text-danger {
  font-weight: bold;
  color: #f56c6c;
}

.text-warning {
  font-weight: bold;
  color: #e6a23c;
}

.dialog-footer {
  text-align: right;
}
</style>
